<!DOCTYPE html>
<html lang="en">
<head>
  <title>Web Forms 2.0 test page</title>
  <link rel="stylesheet" href="/css/core.css" />
  <style>
    label {width:100px;text-align:right;display:inline;}
    input {height:20px;width:200px;}
    [type=datetime] {font: normal 14px 'Helvetica Neue';color:red;}
    [type=date] {font: bold 42px 'Hobo Std';}
    [autofocus] {background:blue;}
    [list] {background:#ff0;}
    [required] {border:2px dotted green;}
    input:required {outline: 2px solid #f00;color:red;}
    div {margin-bottom:20px;overflow:hidden;}
    form code {display:block;margin:10px 0 20px;}
    section h1 {font-size:1.5em;}
    input:out-of-range {border: 3px solid red;}
    input:invalid {border:3px solid orange;}
  </style>
  
 		<link type="text/css" rel="stylesheet" href="../../../shared/css/slider.css">
		
		<!--[if lte IE 6]>
        <link type="text/css" rel="stylesheet" href="../../../shared/css/slider_ie.css" />
        <![endif]-->
		
		<link type="text/css" rel="stylesheet" href="../../../shared/js/jscalendar-1.0/calendar-win2k-1.css" />
		<link type="text/css" rel="stylesheet" href="css/form.css" />
		
		
		<script type="text/javascript" src="../../../shared/js/html5.js">
		</script>
		<script type="text/javascript" src="../../../shared/js/Timer.js">
		</script>
		<script type="text/javascript" src="../../../shared/js/EventHelpers.js">
		</script>
		
		
		<!-- replacements for html5 tags -->
		<script type="text/javascript" src=
		"../../../shared/js/frequency-decoder.com/slider.js">
		</script>
		
		<script type="text/javascript" src="../../../shared/js/jscolor/jscolor.js">
		</script>
		
		<script type="text/javascript" src="../../../shared/js/jscalendar-1.0/calendar.js"></script>
		<script type="text/javascript" src="../../../shared/js/jscalendar-1.0/lang/calendar-en.js"></script>
		<script type="text/javascript" src="../../../shared/js/jscalendar-1.0/calendar-setup.js"></script>

         
		<script type="text/javascript" src="../../../shared/js/jslog.js">
		</script>  
		
		<script type="text/javascript" src="../../../shared/js/modernizr.com/modernizr-1.5.min.js">
		</script>     
		<script type="text/javascript" src="../../../shared/js/html5Widgets.js">
		</script>
  
  
  
  
  
</head>
<body>
  <header>
    <h1>Web Forms 2.0 demo page</h1>

  </header>
  <section>
    <h1>Notes:</h1>
    <p>All tested on OSX 10.6.1. Obviously I've left out most of the standard, and therefore boring, inputs.
    <p>Currently, this page is only interesting in Opera <span class="strike">9.60+ (earlier?)</span> 9.0+ (thanks <a href="http://twitter.com/FataL/status/6016610834">@FataL</a>), and partially-so in Safari 3+ / Chrome.
    <p>Safari / Chrome: <code>autofocus</code> (4+), <code>type=search</code>, <code>placeholder</code>, <code>maxlength</code>, <code>:required</code> css pseudo-selector (4+), <code>type=range</code>&mdash;but can't hook into <code>&lt;output&gt;</code>.
    <p>Opera: everything else, for the most part, except for <code>autofocus</code>, <code>placeholder</code>, a chrome style for <code>type=search</code>.
    <p>Both Opera and Safari / Chrome have <code>type=color</code> implemented&mdash;but there is no fancy UI.
    <p>Click submit, or hit enter to see validation errors in Opera. Client-side validation will only work for inputs that have a <code>name</code>:
    <p><b>Bruce Lawson</b> <a href="http://twitter.com/brucel/status/4443537174">writes:</a> <q>forms with required attrib. need name attrib too, otherwise they don't take part in submission so can't be checked</q> (thanks!). See also  his <a href="http://people.opera.com/brucel/demo/html5-forms-demo.html">html5 forms demo page.</a></p>

  </section>
  <section>
    <h1>Demo:</h1>
    <form>
      <div>
        <label>Text:
          <input type="text" maxlength="6"/>
        </label>
        <code>&lt;input type="text" name="text" maxlength="6"/&gt;</code>

      </div>
      <div>
        <label>Search:
          <input type="search" name="search" list="search-suggestions" />
        </label>
        <datalist id="search-suggestions">
          <option label="DM" value="Depeche Mode">
          <option label="Moz" value="Morrissey">
          <option label="NO" value="New Order">

          <option label="TC" value="The Cure">
        </datalist>
        <code><pre>
          (css) [list] {background:#ff0;}
          &lt;input type="search" autofocus list="search-suggestions"/&gt;
          &lt;datalist id="search-suggestions"&gt;
            &lt;option label="DM" value="Depeche Mode"&gt;
            &lt;option label="Moz" value="Morrissey"&gt;

            &lt;option label="NO" value="New Order"&gt;
            &lt;option label="TC" value="The Cure"&gt;
          &lt;/datalist&gt;
        </pre></code>
      </div>
      <div>
        <label>Telephone:
          <input type="tel" pattern="[0-9]{10}" name="tel" title="Phone Number?!?!"/>

        </label>
        <code>&lt;input type="tel" pattern="[0-9]{10}" name="tel" title="Phone Number?!?!"/&gt;</code>
      </div>
      <div>
        <label>Password:
          <input type="password" autofocus name="pass" placeholder="Password"/>
        </label>
        <code>
        <pre>

          (css) [autofocus] {background:blue;}  
          &lt;input type="password" placeholder="Password"/&gt;
        </pre>
        </code>
      </div>  
      <div>
        <label>URL:
          <input type="url" id="url" name="earl" required />
        </label>
        <code>

        <pre>
          (css) [required] {border:2px dotted green;}
          (css) input:required {outline: 2px solid #f00;color:red;}  
          &lt;input type="url" id="url" name="earl" required /&gt;
        </pre>  
        </code>
      </div>
      <div>
        <label>Email:
          <input type="email" placeholder="foo@bar.com" />
        </label>

        <code>&lt;input type="email" placeholder="foo@bar.com" /&gt;</code>
      </div>
      <div>
        <label>Datetime:
          <input type="datetime" />
        </label>
        <code><pre>
          (css) [type=datetime] {font: normal 14px 'Helvetica Neue';color:red;}
          &lt;input type="datetime" /&gt;

          </pre></code>
      </div>
      <div>
        <label>Date:
          <input type="date" />
        </label>
        <code><pre>
          (css) [type=date] {font: normal 15px 'Hobo Std';}
          &lt;input type="date" /&gt;

          </pre></code>
      </div>
      <div>
        <label>Month:
          <input type="month" />
        </label>
        <code>&lt;input type="month" /&gt;</code>
      </div>  
        <label>Week:
          <input type="week" />

        </label>
        <code>&lt;input type="week" /&gt;</code>
      <div>
        <label>Time:
          <input type="time" />
        </label>
        <code>&lt;input type="time" /&gt;</code>
      </div>

        <label>Date-Time Local:
          <input type="datetime-local" />
        </label>
        <code>&lt;input type="datetime-local" /&gt;</code>
      <div>
        <label>Number:
          <input type="number" min="99" max="101"/>
        </label>
        <code>&lt;input type="number" min="99" max="101"/&gt;</code>

      </div>
      <div>
        <label>Range:
          <input type="range" name="range" />
          <output required onforminput="value=range.value">0</output>
        </label>
        <pre>
        &lt;input type="range" required name="range" />
        &lt;output onforminput="value=range.value"&gt;0&lt;/output&gt;</pre>

      </div>
      <div>
        <label>Color:
          <input type="color" />
        </label>
        <code>&lt;input type="color"/&gt;</code>
      </div>
      <div>
        <label>Checkbox:
          <input type="checkbox" />

        </label>
        <code>&lt;input type="checkbox"/&gt;</code>
      </div>
      <div>
        <label>Radio:
          <input type="radio" />
        </label>
        <code>&lt;input type="radio"/&gt;</code>

      </div>
      <div>
        <label>Select:
          <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
            <option>Option 4</option>

            <option>Option 5</option>
            <option>Option 6</option>
            <option>Option 7</option>
            <option>Option 8</option>
            <option>Option 9</option>
            <option>Option 10</option>

            <option>Option 11</option>
          </select>
        </label>
      </div>
      <div>
        <label>File:
          <input type="file" multiple />
        </label>
        <code>&lt;input type="file" multiple /&gt;</code>

      </div>
      <input type="submit" />
    </form>
  </section>
  <p class="small">Copyright &copy; 2009 Michael Taylor and licensed under the <a href="/code/license.txt">MIT license.</a></p>
  <script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script>

  <script type="text/javascript">try {var pageTracker = _gat._getTracker("UA-1911699-3");pageTracker._trackPageview();} catch(err) {}</script>
<body>
</html>